<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from "axios";

const router = useRouter()
const route = useRoute()
const activeTab = ref('')
const navItems = ref(['对话', '助手', '社区'])
const localhost = "http://localhost:8511/users/"
var Token = ""
const setActiveTabByRoute = () => {
  switch (route.path) {
    case '/':
      activeTab.value = '对话'
      break
    case '/assistant':
      activeTab.value = '助手'
      break
    case '/community':
      activeTab.value = '社区'
      break
  }
}

watch(() => route.path, () => {
  setActiveTabByRoute()
})
const getToken = () => {
  axios.get(localhost + `getToken?token=`+Token).then(response => {
    console.log(response.data)
    if (response.data.code == 200){
      // localStorage.setItem("users",response.data.data);
      // sessionStorage.setItem("users",response.data.data);
      sessionStorage.setItem("users", JSON.stringify(response.data.data));
      router.push('/profile')
    }else {
      router.push('/login')
    }
  })
}

const setToken = () => {
  // var token = localStorage.getItem('phone')
  const data = localStorage.getItem('phone');
  console.log(data)
  if (data!= null && data != ""){
    Token = data;
    console.log(Token)
  }
}
onMounted(() => {
  setActiveTabByRoute()
  setToken()
})
// router.push('/profile')

const switchTab = (tab: string) => {
  if (tab === '助手') {
    router.push('/assistant')
  } else if (tab === '对话') {
    router.push('/')
  } else if (tab === '社区') {
    router.push('/community')
  }
}

// 跳转到历史对话页面
const goToHistory = () => {
  router.push('/history-chat')
}
</script>

<template>
  <div class="header">
    <div class="status-bar">
      <div class="time">12:00</div>
      <div class="signal"></div>
      <div class="wifi"></div>
      <div class="battery"></div>
    </div>
    <div class="nav-bar">
      <div class="nav-left">
        <div class="p-icon" @click="goToHistory">P</div>
      </div>
      <div class="nav-wrapper">
        <div class="nav-bar">
          <div 
            v-for="item in navItems" 
            :key="item"
            class="nav-item"
            :class="{ active: activeTab === item }"
            @click="switchTab(item)"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="right-icons">
        <div 
          class="search-icon" 
          v-if="route.path === '/assistant'"
          @click="router.push('/search')"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="white" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
          </svg>
        </div>
        <div class="profile-icon" @click="getToken">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="user-icon">
            <path fill="white" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.header {
  background: linear-gradient(90deg, #f5a8f0 0%, #7ecfff 100%);
  padding-top: env(safe-area-inset-top);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  max-width: 414px;
  margin: 0 auto;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 6px 16px;
  color: white;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  color: white;
}

.nav-left {
  display: flex;
  align-items: center;
}

.p-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: background-color 0.3s;
}

.p-icon:hover {
  background: rgba(255, 255, 255, 0.3);
}

.nav-wrapper {
  background: linear-gradient(90deg, #f5a8f0 0%, #7ecfff 100%);
  padding: 0 8px;
  flex: 1;
}

.nav-bar {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 4px 0;
  position: relative;
}

.nav-item {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  padding: 2px 0;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.nav-item.active {
  color: #fff;
  font-weight: 500;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

.right-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  transition: opacity 0.2s;
}

.search-icon:active {
  opacity: 0.7;
}

.search-icon svg {
  width: 100%;
  height: 100%;
}

.profile-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  transition: opacity 0.2s;
}

.profile-icon:active {
  opacity: 0.7;
}

.user-icon {
  width: 24px;
  height: 24px;
  opacity: 0.9;
}
</style> 